<template>
	<div class="container">
		<div class="left-grid">
			<el-card>
				<el-row>
					<el-form>
						<el-form-item label="柱状图标题">
							<el-input v-model="title"></el-input>
						</el-form-item>
						<el-form-item label="项目名：">
							<el-input v-model="input_name"></el-input>
						</el-form-item>
						<el-form-item label="净现值(亿元)：">
							<el-input v-model="input_w1"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="insertData">插入数据</el-button>
						</el-form-item>
					</el-form>
				</el-row>
			</el-card>
			<el-card>
				<el-row>
					<el-table :data="table_data" :show-header="true" :height="320" stripe>
						<el-table-column type="index" label="序号" width="100%" align="center">
						</el-table-column>
						<el-table-column prop="name" label="项目名称" align="center"></el-table-column>
						<el-table-column prop="w1" label="净现值" align="center"></el-table-column>
						<el-table-column label="操作" align="center">
							<template #default="scope">
								<el-button type="danger" @click="deleteItemByIndex(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
			</el-card>
		</div>
		<div class="right-grid" ref="myChart"></div>
	</div>
</template>

<script>
import { getCurrentInstance } from "vue";
import * as echarts from 'echarts';
export default {
	data() {
		return {
			table_data: [
				{
					name: "",
					w1: "",					//净现值
				},
			],
			title: "项目经济比选模块",
			echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
			input_name: "",
			input_w1: null,
		};
	},
	created() {
		this.load()
	},
	mounted() {
	},

	methods: {
		load() {
			this.$request.get("/computed", {
				params: {
					id: null,
					username: '',
					name: '',
					w1: '',   					//净现值

				}
			}).then(res => {
				// 假设返回的数据是一个对象数组，每个对象都有username属性  
				this.table_data = res.filter(item => item.username === this.$store.state.userInfo.username);

				// 数据过滤后，再生成图表  
				this.create_axis();
			}).catch(error => {
				console.error("数据加载失败:", error);
				// 错误处理...  
			});
		},
		create_axis() {
			//3.初始化实例对象 echarts.init(dom容器)
			var data_xAxis = [];
			var data_series = [];
			var data_legend = ["净现值"];
			for (var i = 0; i < this.table_data.length; i++) {
				data_xAxis.push(this.table_data[i].name);
				data_series.push(this.table_data[i].w1);
			}
			var dom = this.$refs["myChart"]; // 获取dom节点
			var myChart = this.$echarts.init(dom);
			//4.指定配置项和数据
			var option = {
				title: {
					text: this.title,
				},
				tooltip: {},
				legend: {
					data: data_legend,
				},
				xAxis: {
					data: data_xAxis,
				},
				yAxis: {},
				series: [
					{
						name: "净现值",
						type: "bar",
						data: this.table_data.map(item => parseFloat(item.w1)),
					},
				],
			};

			//5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		deleteItemByIndex(row) {
			var index = this.table_data.findIndex((item) => item.name == row.name);
			this.table_data.splice(index, 1);
			this.create_axis();
		},
		insertData() {
			this.table_data.push({
				name: this.input_name,
				w1: this.input_w1,
			});
			this.create_axis();
		},
	},
};
</script>

<style scoped>
.container {
	display: grid;
	grid-template-columns: 35% 65%;
	width: 100%;
	height: 100%;
}

.left-grid {
	background-color: #f0f0f0;
	border-radius: 2%;
	padding: 20px;
	height: 90%;
}

.right-grid {
	background-color: #f9ecc3;
	border-radius: 2%;
	padding: 20px;
	height: 90%;
}

.grid-content1 {
	background-color: rgb(44, 143, 121);

	border-radius: 4px;

	height: 100vh;

	width: 35vw;
}

.grid-content2 {
	background-color: rgb(44, 143, 121);

	border-radius: 4px;

	height: 100vh;

	width: 65vw;
}

.bg-purple {
	background: #7e2970;
}

.bg-purple-light {
	background: #071c4d;
}
</style>
